---
title: Avatar Tersendiri
description: Menggubah avatar pengguna aplikasi anda
---

# Avatar Tersendiri

## Menggubah avatar pengguna aplikasi anda

Secara lalai, kami menyediakan avatar untuk pengguna sekiranya imej ENS mereka tidak disetkan, tetapi anda boleh menyesuaikan ini dengan menyediakan komponen avatar anda sendiri. Anda boleh mengimport jenis `AvatarComponent` jika menggunakan TypeScript:

```tsx
import {
  RainbowKitProvider,
  AvatarComponent,
} from '@rainbow-me/rainbowkit';
import { generateColorFromAddress } from './utils';

const CustomAvatar: AvatarComponent = ({ address, ensImage, size }) => {
  const color = generateColorFromAddress(address);
  return ensImage ? (
    <img
      src={ensImage}
      width={size}
      height={size}
      style={{ borderRadius: 999 }}
    />
  ) : (
    <div
      style={{
        backgroundColor: color,
        borderRadius: 999,
        height: size,
        width: size,
      }}
    >
      :^)
    </div>
  );
};

const App = () => {
  return (
    <RainbowKitProvider avatar={CustomAvatar} {...etc}>
      {/* ... */}
    </RainbowKitProvider>
  );
};
```

Komponen `AvatarComponent` yang diteruskan kepada prop `avatar` mempunyai jenis props seperti berikut: `<{ alamat: string; imejEns?: string | null; saiz: number;}>`
